<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../../dist/mui.css">
</head>

<body>
  <div id="app">
    <m-page shape="modern" :data="pageData">
      <m-panel>
        <m-grid direction="vertical" height="100%" gutter="16">
          <m-grid-item>
            <m-form labm-position="left">
              <m-form-item :span="6" label="用户名：">
                <m-input></m-input>
              </m-form-item>
              <m-form-item :span="6" label="时间：">
                <m-input suffix-icon="date"></m-input>
              </m-form-item>
              <m-form-item :span="6" label="类别：">
                <m-input suffix-icon="arrow-down"></m-input>
              </m-form-item>
              <m-form-item :span="6" align="right">
                <m-button conner>重置</m-button>
                <m-space direction="left">
                  <m-button type="primary" conner>查询</m-button>
                </m-space>
                <!-- <m-space direction="left">
                  <m-button type="primary" text icon="arrow-down">展开</m-button>
                </m-space> -->
              </m-form-item>
            </m-form>
          </m-grid-item>
          <m-grid-item paved>
            <m-table :data="tableData">
              <m-table-column fixed="prefix" prop="date" label="日期" width="180">
              </m-table-column>
              <m-table-column prop="name" label="姓名" width="160">
              </m-table-column>
              <m-table-column prop="province" label="省份" width="200">
              </m-table-column>
              <m-table-column prop="city" label="市区" width="200">
              </m-table-column>
              <m-table-column prop="address" label="地址" width="300">
              </m-table-column>
              <m-table-column prop="zip" label="邮编" width="160">
              </m-table-column>
              <m-table-column type="button" fixed="suffix" label="操作" width="160">
              </m-table-column>
            </m-table>
          </m-grid-item>
          <m-grid-item last>
            <m-row paved>
              <m-col span="auto"></m-col>
              <m-col>
                <m-pagination :current-page="1" :total="1000"></m-pagination>
              </m-col>
            </m-row>
          </m-grid-item>
        </m-grid>
      </m-panel>
    </m-page>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="../../../dist/mui.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function () {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1517 弄',
            zip: 200333
          }, {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 200333
          }, {
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 200333
          }, {
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1517 弄',
            zip: 200333
          }, {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 200333
          }, {
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 200333
          }, {
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1517 弄',
            zip: 200333
          }, {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 200333
          }, {
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 200333
          }, {
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1517 弄',
            zip: 200333
          }, {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 200333
          }, {
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 200333
          }, {
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1517 弄',
            zip: 200333
          }, {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 200333
          }, {
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 200333
          }],
          pageData: {
            logo: 'https://pm.longrise.cn/LPOM/LEAP/SharedLib/c78357cd0b4b432d9c135a741e15c2bf/logo3.png',
            bookmark: [{
              label: '首页'
            }, {
              label: '个人办公'
            }, {
              label: '项目管理'
            }, {
              label: '人力资源'
            }, {
              label: '客户管理'
            }, {
              label: '内部邮件'
            }, {
              label: '学习交流'
            }, {
              label: '我的文档'
            }, {
              label: '工作圈'
            }, {
              label: '会议系统'
            }, {
              label: '日程管理'
            }, {
              label: '系统配置'
            }],
            menu: [{
              defaultIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              activeIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              label: '首页',
              url: '/',
              id: '0'
            }, {
              defaultIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              activeIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              label: '个人办公',
              url: '/',
              id: '1',
              children: [{
                label: '新增工作',
                url: '/'
              }, {
                label: '我的工作',
                url: '/',
                children: [{
                  label: '我的待办',
                  url: ''
                }, {
                  label: '我的在办',
                  url: ''
                }, {
                  label: '我的已办',
                  url: ''
                }, {
                  label: '我的挂起',
                  url: ''
                }, {
                  label: '我经手',
                  url: ''
                }, {
                  label: '我发起',
                  url: ''
                }]
              }, {
                label: '综合待办',
                url: '/'
              }, {
                label: '通知公告',
                url: '/',
                children: [{
                  label: '发送列表',
                  url: ''
                }, {
                  label: '接收列表',
                  url: ''
                }, {
                  label: '草稿箱',
                  url: ''
                }, {
                  label: '回收站',
                  url: ''
                }]
              }, {
                label: '个人设置',
                url: '/',
                children: [{
                  label: '委托代理',
                  url: ''
                }, {
                  label: '个人分组',
                  url: ''
                }]
              }]
            }, {
              defaultIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              activeIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              label: '项目管理',
              url: '/',
              id: '1',
              children: [{
                label: '项目清单',
                url: ''
              }, {
                label: '项目监控',
                url: ''
              }, {
                label: '过程管理',
                url: ''
              }, {
                label: '任务管理',
                url: ''
              }, {
                label: '文档管理',
                url: ''
              }, {
                label: '采购管理',
                url: ''
              }]
            }, {
              defaultIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              activeIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              label: '人力资源',
              url: '/',
              id: '1',
              children: [{
                label: '新增工作',
                url: ''
              }, {
                label: '入职指引',
                url: ''
              }, {
                label: '打卡记录',
                url: ''
              }, {
                label: '考勤管理',
                url: ''
              }, {
                label: '员工考勤地点',
                url: ''
              }, {
                label: '加班调休数据统计',
                url: ''
              }]
            }, {
              defaultIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              activeIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              label: '客户管理',
              url: '/',
              id: '1',
              children: [{
                label: '客户管理',
                url: ''
              }, {
                label: '客户批注',
                url: ''
              }, {
                label: '客户会议',
                url: ''
              }]
            }, {
              defaultIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              activeIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              label: '内部邮件',
              url: '/',
              id: '1',
              children: [{
                label: '写邮件',
                url: ''
              }, {
                label: '已发邮件',
                url: ''
              }, {
                label: '收件箱',
                url: ''
              }, {
                label: '草稿箱',
                url: ''
              }, {
                label: '回收站',
                url: ''
              }]
            }, {
              defaultIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              activeIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              label: '学习交流',
              id: '1',
              url: '/'
            }, {
              defaultIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              activeIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              label: '我的文档',
              url: '/'
            }, {
              defaultIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              activeIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              label: '工作圈',
              id: '1',
              url: '/'
            }, {
              defaultIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              activeIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              label: '会议系统',
              id: '1',
              url: '/',
              children: [{
                label: '我的会议',
                id: '1',
                url: ''
              }, {
                label: '会议通知',
                id: '1',
                url: ''
              }, {
                label: '会议室管理',
                id: '1',
                url: ''
              }, {
                label: '会议记录',
                id: '1',
                url: ''
              }]
            }, {
              defaultIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              activeIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              label: '日程管理',
              url: '/',
              id: '1',
              children: [{
                label: '我的会议',
                id: '1',
                url: ''
              }, {
                label: '会议通知',
                id: '1',
                url: ''
              }, {
                label: '会议室管理',
                id: '1',
                url: ''
              }, {
                label: '会议记录',
                id: '1',
                url: ''
              }]
            }, {
              defaultIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              activeIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              label: '系统配置',
              url: '/',
              id: '1',
              children: [{
                label: '我的会议',
                id: '1',
                url: ''
              }, {
                label: '会议通知',
                id: '1',
                url: ''
              }, {
                label: '会议室管理',
                id: '1',
                url: ''
              }, {
                label: '会议记录',
                id: '1',
                url: ''
              }]
            }, {
              defaultIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              activeIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              label: '问卷调查',
              url: '/',
              children: [{
                label: '我的会议',
                id: '1',
                url: ''
              }, {
                label: '会议通知',
                id: '1',
                url: ''
              }, {
                label: '会议室管理',
                id: '1',
                url: ''
              }, {
                label: '会议记录',
                id: '1',
                url: ''
              }]
            }, {
              defaultIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              activeIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              label: '规范文档',
              url: '/',
              id: '1',
              children: [{
                label: '我的会议',
                id: '1',
                url: ''
              }, {
                label: '会议通知',
                id: '1',
                url: ''
              }, {
                label: '会议室管理',
                id: '1',
                url: ''
              }, {
                label: '会议记录',
                id: '1',
                url: ''
              }]
            }, {
              defaultIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              activeIcon: 'https://pm.longrise.cn/LPOM/LEAP/systemImgs/img_menu/selected/firstpage2.png',
              label: '总裁信箱',
              id: '1',
              url: '/'
            }]
          }
        }
      }
    })
  </script>
</body>

</html>